<template>
<footer>

    <div class="content">
        <div class="left">
            <div class="section company">
                <div class="company-logo">
                    <img src="/index/logo.png" alt="">
                </div>
                <div class="company-info address">上海市浦东新区秀浦路2388号12栋</div>
                <div class="company-info tele">电话：400 800 7671</div>
                <div class="company-info email">邮箱：info@fftai.com</div>
            </div>
            <div class="section follow-us">
                <div class="tip">关注我们</div>
                <div class="platforms">
                    <div class="follow-us__row">
                        <div class="follow-us__col">
                            <div class="platform-code">
123
                            </div>
                            <img src="/index/wx.png" alt="">
                            <span>微信服务号</span>

                        </div>
                    <div class="follow-us__col">
                        <img src="/index/wx.png" alt="">
                            <span>微信服务号</span>
                            <div class="platform-code">
123
                            </div>
                    </div>
                    </div>
                    <div class="follow-us__row">
                        <div class="follow-us__col">
                            <img src="/index/wx.png" alt="">
                            <span>微信服务号</span>
                            <div class="platform-code">
123
                            </div>
                        </div>
                        <div class="follow-us__col">
                            <img src="/index/wx.png" alt="">
                            <span>微信服务号</span>

                            <div class="platform-code">
123
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section our-brands">
                <div class="brand-tip">
                    傅利叶智能集团旗下品牌
                </div>

                <div class="brands">
                    <img class="brand" src="/index/logo.png" alt="">
                </div>
            </div>
        </div>
        <!-- <div class="right">
            <div class="items">
                <div class="item-title">

                </div>

                <div class="item-children">

                </div>
            </div>
        </div> -->
    </div>

    <div class="bottom">
        <div class="bottom-content">
            <div class="links">
                <a href="">法律声明</a>
                <a href="">隐私</a>
                <a href="">关于我们</a>
            </div>

            <div class="copyright">
                <span>2023上海傅利叶智能科技有限公司</span>
                <a  target="_blank" href="http://beian.miit.gov.cn/">
                沪ICP备16009987号
                </a>
                <a  target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011502015345">
                    <!-- <img src="/index/beian.icon" style="display: inline;"> -->
                    沪公网安备 31011502015345号
                </a>
            </div>
        </div>
    </div>

</footer>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
footer{
    width: 100%;
    height: 40rem;
    background-color: beige;
    display: flex;
    flex-direction:column;
    color: white;
    font-size: 1.5rem;
    background-color: rgb(46, 46, 46);
    overflow: hidden;

    .content{
        flex: 1;
        background-color: rgb(46, 46, 46);
        display: flex;
        flex-direction: row;
        padding: 5rem 0 0 6rem;
        .left{
            flex: 4;
            // background-color:rgb(79, 68, 52) ;
            display: flex;
            flex-direction: row;

            .section{

            }
            .company{
                flex: 3;
                // background-color: antiquewhite;
                display: flex;
                flex-direction: column;
                // padding-bottom: 6rem;
                .company-logo{
                    // flex: 1;
                    padding-bottom: 2rem;
                    img{
                        width: 80%;
                    }
                }
                .company-info{
                    height: 3rem;
                }
                .address{

                }
                .tele{

                }
                .email{

                }
            }
            .follow-us{
                // padding:0rem 12rem 0 0rem;
                flex:3;
                width: 50rem;
                display: flex;
                flex-direction: column;
                // background-color: aquamarine;
                .tip{
                    font-size: 2.4rem;
                    opacity: 0.6;
                    height: 4rem;
                }
                .platforms{
                    flex: 1;
                    width: 30rem;
                    padding-bottom: 10rem;
                    display: flex;
                    flex-direction: column-reverse;
                    .follow-us__row{
                        flex: 1;
                        display: flex;
                        .follow-us__col{
                            position: relative;
                            flex: 1;
                            display: flex;
                            justify-content:left;
                            align-items: center;

                            img{
                                height: 2.5rem;
                            }

                            span{
                                margin-left: 1rem;


                            }

                            .platform-code{
                                position: absolute;
                                top: 100%;
                                left: 3rem;
                                height: 15rem;
                                width: 15rem;
                                background-color: aqua;
                                display: none;
                            }
                            :hover{
                                color: antiquewhite;
                            }
                        }
                        .follow-us__col:hover .platform-code{
                            display: block;
                        }
                    }

                }
            }
            .our-brands{
                flex: 5;
                // margin-top:6rem;
                display: flex;
                flex-direction: column;
                // background-color: rgb(146, 219, 195);

                .brand-tip{
                    font-size: 2.4rem;
                    opacity: 0.6;
                    height: 4rem;
                    margin-bottom: 3rem;
                }
                .brands{
                    display: flex;
                    .brand{
                        width: 30rem;
                        object-fit: contain;
                    }
                }
            }
        }
        .right{
            flex: 7;
            display: flex;
            flex-direction: row;
            // background-color: azure;

            .items{

            }
        }
    }

    .bottom{
        height:8rem;
        background-color: rgb(46, 46, 46);

        .bottom-content{
            margin: 0 5rem 0 5rem;
            padding-top: 2rem;
            border-top: 1px solid rgb(166, 166, 166);
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            .links{

                a{
                    color: white;
                    margin-right: 1rem;
                    opacity: 0.6;
                    font-size: 1.6rem;
                }

            }
            .copyright{
                span{
                    color: white;
                    margin-right: 1rem;
                    opacity: 0.6;
                    font-size: 1.6rem;
                }
                a{
                    color: white;
                    margin-right: 1rem;
                    opacity: 0.6;
                    font-size: 1.6rem;
                }
            }
        }
    }
}
</style>
